<template>
  <div class="map-echarts">
    <div id="chars" :style="{
      width:width,
      height:height
    }"></div>
    <div ref="nDialogRef" class="dialog normal-dialog" v-if="currDialog == 'normal'" :style="dialogStyle">
      正常弹框
    </div>
    <div ref="abDialogRef" class="dialog abnormal-dialog" v-else-if="currDialog == 'abnormal'" :style="dialogStyle">
      报警弹框
    </div>
  </div>
</template>

<script>
/***
 * 功能：
 * 1、显示区域地图，背景图片覆盖原地图效果
 * 2、地图打点，显示地理位置
 * 3、模拟报警
 */
 import * as echarts from "echarts";
// const mapJson = require("./assets/mapdata/map120115.json"); //根据需要的地区更换对应的JSON文件
// const base64Img = require("./images/base64Images.json"); // 若散点图为图片，则需要转为base64格式,在线转换网址【http://tool.chinaz.com/tools/imgtobase】
import mapJson from './assets/mapdata/map120115.json'
import base64Img from './images/base64Images.json'
export default {
  name: "MapEcharts",
  props: {
    width: {
      // 宽
      type: String,
      default: "100%"
    },
    height: {
      // 高
      type: String,
      default: "100vh"
    },
    iconSize: {
      type: Array,
      default: () => {
        return [40, 40];
      }
    },
    dataList: {
      // 正常锚点数据
      type: Array
    },
    alarmData: {
      type: Object
    }
  },
  data() {
    return {
      alarmDataList: [],
      visable: false,
      currDialog: ""
    };
  },
  created() {},
  async mounted() {
    // 初始化组件
    console.log(this.dataList);
    await this.initData();
  },
  watch: {
    alarmData: {
      // 监听alarmData的变化
      handler(newValue, oldValue) {
        for (let item of this.dataList) {
          if (
            item.pointLng == newValue.pointLng &&
            item.pointLat == newValue.pointLat
          ) {
            item.isAlarm = newValue.isAlarm;
            this.currDialog = "";
            if (item.isAlarm) {
              item.symbol = base64Img.pointAbnormal; //异常情况锚点图片
              item.symbolSize = this.iconSize;
              this.alarmDataList = this.dataList;
            } else {
              item.symbol = base64Img.pointNormal;
              this.alarmDataList = [];
            }
          }
        }
        this.initMap();
      },
      deep: true
    }
  },

  methods: {
    initMap() {
      let chars = echarts.init(document.getElementById("chars"));
      let data = [];
      echarts.registerMap(mapJson.features[0].properties.name, mapJson);
      let option = {
        backgroundColor: "transparent", // 背景
        tooltip: {
          show: false
        },
        legend: {
          show: false
        },
        geo: {
          //表示使用地理坐标系
          show: true,
          map: mapJson.features[0].properties.name,
          label: {
            normal: {
              show: false
            },
            emphasis: {
              show: false
            }
          },
          zoom: 1,
          itemStyle: {
            normal: {
              areaColor: "transparent",
              borderColor: "transparent"
            },
            emphasis: {
              areaColor: "transparent",
              borderColor: "transparent"
            }
          }
        },
        series: [
          {
            name: `${mapJson.features[0].properties.name}数据`,
            type: "map",
            map: mapJson.features[0].properties.name, // 自定义扩展图表类型
            zoom: 0.57, //缩放
            aspectScale: 0.75, //长宽比
            showLegendSymbol: false,
            label: {
              // 文字
              show: false,
              color: "#fff",
              fontSize: 12
            },
            itemStyle: {
              //地图样式
              normal: {
                areaColor: "transparent",
                borderColor: "transparent"
              }
            },
            emphasis: {
              //鼠标移入动态的时候显示的默认样式
              label: {
                show: false
              },
              itemStyle: {
                areaColor: "transparent",
                borderColor: "transparent"
              }
            },
            layoutCenter: ["50%", "50%"],
            layoutSize: "160%",
            markPoint: {
              symbol: "none"
            },
            data: mapJson
          },
          {
            type: "effectScatter", // 带有涟漪特效动画的散点（气泡）图
            coordinateSystem: "geo", // 必须设置，geo:表示使用地理坐标系,cartesian2d:表示使用二维的直角坐标系,polar:表示使用极坐标系
            data: this.alarmDataList,
            // showEffectOn:'render',// 配置何时显示特效。
            rippleEffect: {
              // 涟漪特效相关配置。
              period: 5, // 动画的周期，秒数。
              // scale: 2.5, // 动画中波纹的最大缩放比例。
              brushType: "fill" // 波纹的绘制方式,可选 'stroke' 和 'fill'
            },
            hoverAnimation: true, // 是否开启鼠标 hover 的提示动画效果。
            itemStyle: {
              color: "transparent"
            },
            zlevel: 1
          },
          {
            type: "scatter", // 散点（气泡）图
            coordinateSystem: "geo", // 必须设置，geo表示使用地理坐标系
            symbol: base64Img.pointNormal, //正常情况下锚点图片
            symbolSize: this.iconSize, //正常情况下锚点图片大小
            data: this.dataList,
            hoverAnimation: true, // 是否开启鼠标 hover 的提示动画效果。
            animation: true,
            animationEasing: "bounceln", //初始动画的缓动效果
            itemStyle: {
              //地图样式
              normal: {
                areaColor: "transparent",
                borderColor: "transparent"
              },
              emphasis: {
                areaColor: "transparent",
                borderColor: "transparent"
              }
            },
            zlevel: 2
          }
        ]
      };
      chars.setOption(option);
      let that = this;
      chars.on("click", params => {
        // seriesIndex根据zlevel来决定,zlevel控制层级,决定点击事件在什么地方触发
        if (params.seriesIndex == 2) {
          // 示例为显示正常状态弹框
          if (!params.data.isAlarm) {
            // 根据params.event.offsetX和params.event.offsetY确定弹框位置
            this.dialogStyle = {
              left: params.event.offsetX - 97.5 + "px", //弹框宽度的一半
              top: params.event.offsetY - 60 + "px" // 弹框高度加10px
            };
            this.currDialog = "normal";
          } else {
            // 示例为显示异常状态弹框
            this.dialogStyle = {
              left: params.event.offsetX - 132.5 + "px", //弹框宽度的一半
              top: params.event.offsetY - 212 + "px" // 弹框高度加10px
            };
            this.currDialog = "abnormal";
          }
        }
      });
      chars.on("mouseover", params => {
        //鼠标移开关闭弹框
        if (params.seriesIndex != 2) {
          this.currDialog = "";
        }
      });
    },
    async initData() {
      for (let item of this.dataList) {
        // echarts仅支持name、value
        item.name = item.policeStationName; // 可能不同
        item.value = [item.pointLng, item.pointLat]; // 经纬度
      }
      console.log(this.dataList);
      await this.initMap();
    }
  },
  destroyed() {}
};
</script>
<style lang='scss' scoped>
.map-echarts {
  position: relative;
  #chars {
    background: url("./images/map.png") no-repeat center;
  }
  .dialog {
    z-index: 2;
    position: absolute;
    color: #ffffff;
    &.normal-dialog {
      // 正常状态弹框
      height: 48px;
      width: 195px;
      // background: url(./images/modal_bg_normal.png) no-repeat left top/100% 100%;
      border: 1px solid green;
    }
    &.abnormal-dialog {
      // 异常状态弹框
      width: 265px;
      height: 200px;
      // background: url(./images/modal_bg_abnormal.png) no-repeat left top/100%
      //   100%;
      border: 1px solid red;
    }
  }
}
</style>
